{% extends "base.html" %}

{% block extra_head %}
{% load bootstrap_toolkit %}
{% endblock %}

{% block content %}
<div class="row">
	<div class="span10">
		<div class="well">
			<table>	
				<tr>
                    <td style="padding-right:100px">
                        <h3>Event Name</h3>
                    </td>
                    <td>
                        <h4>{{ event.name }}</h4>
                    </td>
                </tr>
				<tr>
                    <td>
                        <h3>Event Date</h3>
                    </td>
                    <td>
                        <h4>{{ event.date|date:"SHORT_DATE_FORMAT" }}</h4>
                    </td>
                </tr>
                <tr>
                    <td>
                        <h3>Event Date</h3>
                    </td>
                    <td>
                        <h4>{{ event.time|time:'h:i A' }}</h4>
                    </td>
                </tr>
    			<tr>
                    <td>
                        <h3>Event Location</h3>
                    </td>
                    <td>
                        <h4>{{ event.location }}</h4>
                    </td>
                </tr>
				<tr>
                    <td>
                        <h3>Event Distance</h3>
                    </td>
                    <td>
                        <h4>{{ event.distance|stringformat:"i "|add:event.unit }}</h4>
                    </td>
                </tr>
                <tr>
                    <td>
                        <h3>Description</h3>
                    </td>
                    <td>
                        <h4>{{ event.description }}</h4>
                    </td>
                </tr>
		    </table>
            <h3>Particpants</h3>
            <h4>
                <ul>
                {% for part in event.participants.all %}
                    <li>
                    {%if part.id == event.owner.id %}
                        <span class="label label-success">OWNER</span>
                    {% endif %}
                    {{ part.userprofile.facebook_name }}
                    </li>
                {% endfor %}
                </ul>
            </h4>
		</div>
	</div> 
    <div class="span2">
    {%if user.id == event.owner.id %}
        <form action="{% url event_delete event.id %}" method="post">
		    {% csrf_token %}
			<button type="submit" class="btn btn-danger btn-block">Delete Event</button>
        </form>
    {% else %}{% if user not in event.participants.all %}
        <form action="{% url event_join event.id %}" method="post">
            {% csrf_token %}
            <button type="submit" class="btn btn-success btn-block">Join Event</button>
        </form>
    {% else %}
        <form action="{% url event_leave event.id %}" method="post">
            {% csrf_token %}
            <button type="submit" class="btn btn-warning btn-block">Leave Event</button>
        </form>
    {% endif %}{% endif %}
    </div>
</div>
{% endblock %}